<template>
    <header id="framework_header">
        <section>
            <div class="brand">
                <img class="brand-icon" src="/57774843.jpg" alt="">
                <span class="brand-text"></span>
            </div>
            <div class="nav">
                <div class="nav-item" @click="switchPage(0)">裁剪</div>
                <div class="nav-item" @click="switchPage(1)">关于</div>
                <div class="nav-item" @click="switchPage(2)"></div>
            </div>
        </section>
        <section>
            <div class="user">
                margin-right
            </div>
        </section>



    </header>
    <hr style="margin: var(--framework-header-height) 0 0 0 ; border: none">
</template>

<script setup>
import { watch, ref, reactive } from 'vue';

//const current_page = ref(0)
function switchPage(page = 0) {
    const d = document.querySelectorAll('.nav-item')
    for (let i = 0; i < d.length; i++) {
        if (i != page) {
            d[i].classList.remove('active')
        } else {
            d[i].classList.add('active')
            //current_page.value = i
            emit('update:page', i)
        }
    }
}
const emit = defineEmits(['update:returns', 'update:page'])
</script>

<style scoped lang="scss">
#framework_header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: var(--framework-header-bg-color);
    border-bottom: 1px solid var(--framework-header-border-color);
    height: var(--framework-header-height);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.5rem;

    section {
        display: flex;
        align-items: center;
    }

    .brand {
        display: flex;
        align-items: center;

        img {
            border-radius: 0.125rem;
            width: 2.25rem;
            height: 2.25rem;
        }
    }

    .nav {
        display: flex;
        align-items: center;

        .nav-item {
            &:not(:last-child) {
                margin-left: 0.5rem;
            }

            &:hover {
                cursor: pointer;
                color: orange;
            }

            &.active {
                color: orangered;
            }
        }
    }
}
</style>